import { defineAsyncComponent } from "vue";

// 1.引入所有的组件
/** webpack 中使用require.context 动态导入多模块  require.context('./', false, /[^.]+\.vue/) false代表不含子模块
 *  vite 中 写法
 */

const req = import.meta.glob("@/components/*.vue"); // 组件
const reqParser = import.meta.glob("@/components/parser/*.js"); // 对应json

// 2.动态的去挂载
const components = Object.entries(req).reduce(
  (components, [path, resolver]) => {
    const name = path.match(/([^/]+)\.vue$/)[1];

    components[name] = defineAsyncComponent(resolver); // 定义异步组件

    return components;
  },
  {}
);

// 3.动态获取组件名称
const componentNames = Object.entries(req).map((item) => {
  return item[0].match(/([^/]+)\.vue$/)[1];
});

// 4.配置分配
// const parsers = Object.entries(reqParser).reduce(
//   (parsers, [path, resolver]) => {
//     const name = path.match(/([^/]+)\.js$/)[1];
//     const _name = name.split("-");

//     parsers[_name[_name.length - 1]] = resolver;
//     return parsers;
//   },
//   {}
// );

import cButton from "@/components/parser/parser-cButton.jsx";
import cContainer from "@/components/parser/parser-cContainer.jsx";
import cInput from "@/components/parser/parser-cInput.jsx";

const parsers = {
  cButton: cButton,
  cContainer: cContainer,
  cInput: cInput,
};

export { components, componentNames, parsers };

/** 
 * webpck 写法
 * 
 * // 1.引入所有的组件
const req = require.context('./', false, /[^.]+\.vue/) // 组件
const reqParser = require.context('./', false, /parser-[^.]+\.js/) // 对应json

// 2.动态的去挂载
const componentsName = req.keys()
const components = componentsName.reduce((components, module) => {
  const mod = req(module)

  components[mod.default.name] = mod.default
  return components
}, {})

// 配置分配
const parsersName = reqParser.keys()
const parsers = parsersName.reduce((parsers, module) => {
  const mod = reqParser(module)

  parsers[mod.default.name] = mod.default
  return parsers
}, {})

export {
  components,
  parsers
}

 */
